<template>
    <view class="stay-info-area">
      <view class="stay-item">
        <text class="stay-label">入住</text>
		<picker class="stay-value" mode="date" :start="new Date()" end="2050-12-31" @change="handleStartDateSelect($event,date)">
			{{date.CheckIn||'入住日期'}}
		</picker>
      </view>
	  <view class="stay-item">
	  	<view class="night-item">
	    <text class="night-text">{{calculateStayNights(date.CheckIn,date.CheckOut)}}晚</text>
	  </view>
	  </view>
      <view class="stay-item">
        <text class="stay-label">离店</text>
		<picker class="stay-value" mode="date" :start="new Date()" end="2050-12-31" @change="handleendDateSelect($event,date)">
			{{date.CheckOut||'离店日期'}}
		</picker>
      </view>
      <view class="stay-item">
        <text class="stay-label">入住人数</text>
        <text class="stay-value" @click="open">{{ guestNum }}</text>
      </view>
    </view>
	
</template>

<script setup>
import { ref } from 'vue';
import { calculateStayNights, formatDate } from '../../../utils';
import guestInfo from './guest-info.vue';
import { onLoad } from '@dcloudio/uni-app';

defineProps({
	guestNum:String,
	date:String
})

const checkIn= ref('')
const checkOut= ref('')
const popup = ref(null)

const emit = defineEmits('open',)
const open =()=>{
	emit('open')
}

const handleStartDateSelect =(ev,date)=>{
	console.log(ev.detail.value)
	if(ev.detail.value< formatDate(new Date() ,'YYYY-MM-DD')){
		return uni.showToast({title:'开始时间不能小于当前时间',icon:'none'})
	}
	date.CheckIn=ev.detail.value
}
const handleendDateSelect =(ev,date)=>{
	if (ev.detail.value <= date.CheckIn) {
		console.log('不能小于')
		return uni.showToast({
			title:'结束日期不能小于开始日期',
			icon:'none'
		})
		return uni.showToast('结束日期不能小于开始日期')
	}
	date.CheckOut = ev.detail.value
}

</script>

<style scoped lang="scss">

.stay-info-area {
  display: flex;
  align-items: center;
  justify-content: first baseline;
}

.stay-item {
  flex: 1;
  &:last-child{
	  display: flex;
	  flex-direction: column;
	 align-items: right;
  }
}

.stay-label {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.stay-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.night-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.night-text {
  background-color: #e6f2ff;
  color: #007aff;
  padding: 5rpx 15rpx;
  border-radius: 5rpx;
  font-size: 24rpx;
  margin: 0 20rpx;
}
</style>